<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         *{
                margin: 0px;
                padding: 0px;
                list-style: none;
         }
    .a{
        height: 497px;
        background:url('bg.jpg') repeat-x;
    }
    .a1{
        height:497px ;
        width: 1050px;
        margin-right: auto;
        margin-left: auto;
        /*background:blue;*/
    }
    .b12{
        
        height: 74px;
        float: left; 
    }
    .b13{
        width: 900px;
        height: 74px;
        float: right;
    }
    .b1{
        height:74px ;
        width: 1050px;
        /*background:blueviolet;*/
        float: top;
    }
    .b2{
        height:423px ;
        width: 1050px;
      /*  background:cadetblue;*/
        float: bottom;
    }
    .lo{
        height: 45px;
        width: 126px;
        float: left;
        margin-bottom:16px ; 
        margin-top: 16px; 
    }
    .gao ul{
        float: right;
      
    }
    .gao li{
         float: left;
         margin-right: 5px;
         margin-top:15px;
        padding:12px;
        
    }
    .gao li:hover{
                background:black;
                /* 增加圆角 */
                border-radius: 20px;
            }
            /*字体*/
    .gao a{
        color:#fff;
        text-decoration: none;
    }
   .b21{
       height:423px ;
       width: 500px;
       /*background: aqua;*/
       float: left;
   }
   .b22{
       height:423px ;
       width: 550px;
      /* background: beige;*/
       float: right;
    
   }
   .zhi h1{
       margin-top:55px ;
       margin-bottom:18px ;
   }
   .zhi p{
       margin-bottom:18px ;
   }
   .zhi a{
    color:#fff;
    font-size: 25px;
   }
   .zhi a:hover{
                /*background:red;*/
                /* 增加圆角 */
                border-radius: 20px;
   }
   .lj1{
       float: left;
   }
   .lu{
       color: aquamarine;
   }
   .lu li{
       margin-bottom:8pxb ;
   }
   .com1{
       margin-top:55px; 
   }
   /*第三标题*/
   .c{
       width: 1000px;
       height: 378px;
       /*background: aqua;*/
       margin-left:auto;
       margin-right: auto; 
       margin-top:48px; 
       margin-bottom:27px ;
   }
   .c1{
       width: 633px;
       height: 378px;
       float: left;
      /* background: aqua;*/
   }
   .c2{
       width: 335px;
       height:378px ;
       float: right;
      /* background: antiquewhite;*/
   }
   .ccc1{
       margin-bottom:12px ;
       float: left;
       widows: 500px ;
   }
   .c1 ul{
       float: left;
   }
   .c1 p{
         margin-right:50px ;
   }
   .c2 ul{
       font-size: 15px;
   }
   .c2 span{
       float: right;
   }
   .c2 i{
       color: brown;
   }
   .c2 li{
       margin-bottom:5px; 
   }
   .c22 a{
       float: right;
   }
   .c22{
       height: 42.5px;
       width: 150px;
       margin-top:10px ;
       float: left;
   }
   .c22xxl{
       float: left;
   }
   /*标题4*/
   .d{
       width: 968px;
       height: 100px;
       margin-left:auto ;
       /*background:aquamarine;*/
       margin-right:auto ;
       text-align:center;
       border-top:1px solid black ;
   }
   .d ul{
       float: left;
   }
   .d li{
       float: left
   }
   .d a{
       float: left;
       margin-top:5px; 
}
   .d span{
       float: left;
       margin-top:5px; 
       color:bisque;
    
   }
   .d p{
       float: left;
   }
   .d1{
       height: 100px;
       width: 500px;
       float: left;
   }
   .d2{
       height: 100px;
       width: 468px;
       float: right;
   }
   .d2 a{
       float: right;
   }
   .d2 span{
       float: right;
       color:bisque;
   }
   
    </style>
</head>
<body>
<div class="a">
    <div class="a1">
    <!--第一标题-->
     <div class="b1"><div class="b12">
     <a href=""><img class="lo" src="logo.png" alt=""></a></div>
     <div class="b13">
        <div class="gao"> <ul>
            <li><a href="">首页</a></li>
            <li><a href="">帮助与反馈</a></li>
            <li><a href="">公众平台</a></li>
            <li><a href="">开放平台</a></li>
            <li><a href="">微信支付</a></li>
            <li><a href="">微信广告</a></li>
            <li><a href="">企业微信</a></li>
            <li><a href="">表情开发平台</a></li>
            <li><a href="">微信网页版</a></li>
        </ul></div>

     </div>
     </div>


<!--第二标题-->
<div class="b2">
    <div class="b21">
    <div class="zhi">
    <h1>微信，是一个生活方式</h1>
    <p>
     超过十亿人使用的手机应用</p>
     <p> 支持发送语音短信、视频、图片和文字 </p>   
     <p>  可以群聊，仅耗少量流量，适合大部分智能手机 </p> 
    <div class="lj"> <a style="margin-top:15px" href="https://weixin.qq.com/cgi-bin/readtemplate?uin=&stype=&promote=&fr=&lang=zh_CN&ADTAG=&check=false&nav=download&t=weixin_download_list&loc=readtemplate,weixin,body,6" class="btn_download left"><b></b>
    <img src="lj1.png" alt=""></a>
    </div>
</div>
<div class="lu">
    <ul>
       <a href=""><li>忘记了微信帐号或密码？</li></a> 
       <a href=""><li>自助解除登录或功能限制</li></a> 
       <a href=""><li>冻结或解冻微信帐号</li></a> 
    </ul></div>
    </div>

    <div class="b22"><img class=com1 src="com.png" alt="">
</div>
    </div>
    </div>
    </div>
    <!--第三标题-->
    <div class="c">
    <div class="c1">  <img class="ccc1" src="cc.png" alt="">
     <ul>
         <h3>微信网页版</h3>
         <p>扫一扫二维码</p>
         <p>就能在浏览器上使用微信</p>
         <a href="">了解更多</a>
     </ul>
    <ul>
        <h3>微信 Mac 版</h3>
        <p>极致简洁，迅捷沟通</p>
        <a href="">了解更多</a>
    </ul>
     <ul>
         <h3>微信 Windows 版</h3>
         <p>让沟通更方便</p>
         <a href="">了解更多</a>
     </ul>
    </div>
        
        
    <div class="c2">
        <h2>最新消息</h2>
        <ul>
           <a href=""> <li>微信 8.0.2 for Android 正式版发布<i>(New)</i> <span> 03-25</span></li></a>
           <a href=""><li>微信 3.2.1 for Windows 正式版发布<i>(New)</i> <span> 03-25</span></li></a>
           <a href=""> <li>微信 8.0.2 for iOS 正式版发布<i>(New)</i> <span> 02-02</span></li></a>
           <a href=""> <li>微信 2.6.1 for Mac 正式版发布<i>(New)</i> <span> 01-20</span></li></a>
           <a href=""> <li>关于部分 iOS 9 用户无法更新微信<i>(New)</i> <span> 01-28</span></li></a>
           <a href=""> <li>微信外部链接内容管理规范 <span> 02-11</span></li></a>
           <a href=""> <li>微信网页版 2.1 版本发布<span> 01-17</span></li></a>
           <a href=""> <li>微信表情开放平台上线<span> 07-29</span></li></a>
           <a href=""> <li>官方辟谣公众号开通<span> 10-28</span></li></a>
           <a href=""><li>查看更多</li></a>
        </ul>
      <div class="c22"><a href="">联系我们</a><img class="xxl" src="xx.png" alt=""></div>
    </div>
    </div>
<!--标题4-->
<div class="d"><div class="d1">
        <a href="">关于腾讯</a><span>|</span>
        <a href="">服务条款</a><span>|</span>
        <a href="">使用规范</a><span>|</span>
        <a href="">客服中心</a><span>|</span>
        <a href="">隐私保护指引</a><span>|</span>
        <p>© 1998 - 2021 Tencent Inc. All Rights Reserved</p></div>
        <div class="d2">
            <a href="">简体中文</a><span>|</span>
            <a href="">繁體中文</a><span>|</span>
            <a href="">English</a><span>|</span>
        </div>
 
</div>
</body>
</html>